<template>
  <div class="comment-item">
    <div class="user">
      <img src="/img/default.jpg">
      <span>周杰伦</span>
    </div>
    <div class="comment-content">
      <div class="user-options">
        <span>得了吧，都3202年了，还能见到肉身炸坦克的存在，以色列这战斗力能不能清剿哈马斯还是个问题，这两天哈马斯放出来的视频显示以色列的战斗素养堪忧，神剧打鬼子的桥段出现在以军身上，后期再出现什么情况也说不准，就算进城区被哈马斯打崩溃也不觉得意外</span>
      </div>
      <footer>
        <div class="footer">
          <span>2020-00-01</span>
          <div class="icons">
            <svg class="icon">
              <use xlink:href="#icon-dianzan"></use>
            </svg>
            <svg class="icon" @click="showReplay">
              <use xlink:href="#icon-pinglun"></use>
            </svg>
          </div>
        </div>
        <div class="replay" :class="{active: replay}">
          <el-input class="text" resize="none" v-model="text" type="textarea" autosize
                    placeholder="回复周杰伦："></el-input>
          <footer class="replay-footer">
            <div class="emoji">
              <v3-emoji
                  size="small"
                  :recent="true"
                  @click-emoji="appendText"
              >
              </v3-emoji>
            </div>
            <el-button type="primary">回复</el-button>
          </footer>
        </div>
      </footer>
    </div>


    <div class="comment-child">
      <div class="user">
        <img src="/img/default.jpg">
        <span>秦始皇</span>
      </div>
      <div class="comment-content">
        <div class="user-options">
          <span>安卓端上架最常见的问题是隐私政策问题，不同的应用市场对于APP的隐私政策都有相应的要求，大家可以提前阅读相应应用市场的隐私政策</span>
        </div>
        <footer>
          <div class="footer">
            <span>2020-00-01</span>
            <div class="icons">
              <svg class="icon">
                <use xlink:href="#icon-dianzan"></use>
              </svg>
              <svg class="icon" @click="showReplayChild">
                <use xlink:href="#icon-pinglun"></use>
              </svg>
            </div>
          </div>
          <div class="replay" :class="{active: replayChild}">
            <el-input class="text" resize="none" v-model="childText" type="textarea" placeholder="回复秦始皇：" autosize>
            </el-input>
            <footer class="replay-footer">
              <div class="emoji">
                <v3-emoji
                    size="small"
                    :recent="true"
                    @click-emoji="appendChildText"
                >
                </v3-emoji>
              </div>
              <el-button type="primary">回复</el-button>
            </footer>
          </div>

        </footer>
      </div>

    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import V3Emoji from 'vue3-emoji'
import 'vue3-emoji/dist/style.css'

let replay = ref(false);
let replayChild = ref(false);
let text = ref('');
let childText = ref('');

/**
 * 添加表情
 */
function appendText(emoji) {
  text.value += emoji
}

function appendChildText(emoji) {
  childText.value += emoji

}

/**
 * 清空评论
 */
function clearInput() {
  text.value = ''
  childText.value = ''
}

function showReplay() {
  replay.value = !replay.value
  clearInput()
  if (replay.value) {
    replayChild.value = false
  }
}

function showReplayChild() {
  replayChild.value = !replayChild.value
  clearInput()
  if (replayChild.value) {
    replay.value = false
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/var";

.comment-item {
  .user {
    display: flex;
    align-items: center;
    margin-top: 1rem;

    img {
      width: 2rem;
      margin-right: 1rem;
    }

    span {
      font-weight: bold;
    }
  }
}

.comment-content {
  margin-left: 3rem;

  .user-options {
    padding: 0.2rem;
  }

  .footer {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem;
    color: rgb(196, 196, 196);

    .icons {
      .icon {
        margin: 0 0.5rem;
        cursor: pointer;
      }
    }
  }
}

.comment-child {
  padding: 0.2rem 0 0.2rem 3rem;
}

.replay {
  height: 0;
  width: calc(100% - 1rem);
  border: 0;

  .text {
    display: none;
  }

  .replay-footer {
    display: none;
  }

}

.active.replay {
  height: auto;
  border: 1px solid rgb(235, 235, 235);
  border-radius: 4px;
  padding: 1rem;

  .text {
    display: flex;
    height: auto;
    outline: none;

  }

  .replay-footer {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;

    .emoji {
      z-index: 1000;
    }
  }
}


</style>